<!--  :placeholder="ruleItem.hint" -->
<template>
  <div class="rule-item-css" v-show="type">
    <div v-text="ruleItem.textBefore"></div>
    <el-date-picker v-if="type ==='DateTimeConditions'" @change="changeDateHander"
      v-model="time"
      :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%',margin:'0 10px' }"
      type="datetime">
    </el-date-picker>
    <el-date-picker v-if="type ==='DateConditions'" @change="changeDateHander"
      v-model="time"
      :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%',margin:'0 10px' }"
      type="date">
    </el-date-picker>
    <!-- <el-tooltip v-else-if="type ==='NumberConditions'" :open-delay="1000" :disabled="!getTextWidthOd" :content="String(params[ruleItem.fields])" placement="top" effect="light">
      <el-input v-model.number="params[ruleItem.fields]"
            :placeholder="ruleItem.hint"
            size="mini"
            @input="inpLimit"
            :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%',margin:'0 10px' }"
            class="input-box "></el-input>
    </el-tooltip> -->
    <el-tooltip v-else :open-delay="1000" :disabled="!getTextWidthOd"  :content="String(params[ruleItem.fields])" placement="top" effect="light">
      <el-input v-model="params[ruleItem.fields]"
              :placeholder="ruleItem.hint"
              size="mini"
              :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%',margin:'0 10px' }"
              class="input-box"></el-input>
    </el-tooltip>
    <!-- <el-select v-model="params[ruleItem.fields]"
               placeholder=""
               size="mini"
               clearable
               filterable
               default-first-option
               v-loading="loading"
               element-loading-spinner="el-icon-loading"
               collapse-tags
               @change="selectchange"
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(o,ii) in sort(selectDataObj[`${ruleItem.fields}ListsOrigin`],ruleItem.selectLabel)"
                 :key="ii"
                 :value="o[ruleItem.selectValue]"
                 :label="o[ruleItem.selectLabel]"></el-option>
    </el-select> -->
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'
// import { GlobalTimeformat } from '@/utils/common'
import { Cascader } from './cascader'
import moment from 'moment'
export default {
  mixins: [mixinTypeViewModule],
  props: {
    parentIndex: {
      type: Number
    },
    currIndex: {
      type: Number
    },
    currLabelIndex: {
      type: Number
    }
  },
  data () {
    return {
      receiveParams: {},
      currData: null,
      type: null,
      time: new Date()
    }
  },
  created () {
    this.initCascaderEvent()
    this.EchoEvent()
  },

  /** ==================== MB-15152 START ==================== */
  mounted () {
    // const { get } = this._
    // const value = get(this.params, get(this.ruleItem, 'fields'), [])
    // if (value.length > 0 && this.ruleItem.emitCascaderId) {
    //   Cascader.$emit(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.emitCascaderId}`, value)
    // }
  },
  /** ==================== MB-15152 END ==================== */

  methods: {
    changeDateHander (val) {
      if (this.type === 'DateTimeConditions') {
        this.params[this.ruleItem.fields] = moment.tz(moment(val).format('YYYY-MM-DD HH:mm:ss'), this.$store.state.user.timezoneId).utc().format()
      } else {
        this.params[this.ruleItem.fields] = moment(val).format('YYYY-MM-DD')
      }
    },
    sort (val, o) {
      val = this._.cloneDeep(val)
      // val = val.map(e => e)
      if (val) {
        var temp = val.sort(function (a, b) {
          if (a && b) return a[o].localeCompare(b[o])
        })
        return temp
      }
    },
    EchoEvent () {
      // if (this.ruleItem.urlParams && this.ruleItem.urlParams.length > 0 && this.params[this.ruleItem.fields] && this.params[this.ruleItem.fields].length > 0) {
      //   let keyList = this.ruleItem.urlParams
      //   let params = {}
      //   for (let index = 0; index < keyList.length; index++) {
      //     const element = keyList[index]
      //     params[element] = this.params[element]
      //   }
      //   this.getSelectDataLists({
      //     ...this._.cloneDeep(this.ruleItem),
      //     searchKey: params
      //   })
      // }
    },
    initCascaderEvent () {
      let _self = this
      if (_self.ruleItem.receiveCascaderId) {
        // Cascader.$on(`cascader${this.currIndex}${_self.params.onlyId}`, (data) => {
        //   if (_self.currLabelIndex > data) {
        //     _self.params[_self.ruleItem.fields] = []
        //     _self.selectDataObj[`${_self.ruleItem.fields}ListsOrigin`] = []
        //   }
        // })
        Cascader.$on(`cascader${this.currIndex}${_self.params.onlyId}${_self.ruleItem.receiveCascaderId}`, (data, isInit) => {
          let res = _self.$store.state.user[`custominputlist-${_self.ruleItem.receiveCascaderId}`].find(it => it[_self.ruleItem.queryFields] === data)
          if (res && res.type) {
            if (isInit) {
              if (res.type === 'DateConditions') {
                if (_self.params[_self.ruleItem.fields]) {
                  if (this.type === 'DateTimeConditions') {
                    _self.time = moment.tz(_self.params[_self.ruleItem.fields], this.$store.state.user.timezoneId).format('YYYY-MM-DD HH:mm:ss')
                  } else {
                    _self.time = moment(_self.params[_self.ruleItem.fields]).format('YYYY-MM-DD')
                  }
                }
              }
            } else {
              if (res.type === 'DateConditions') {
                _self.time = new Date()
                if (this.type === 'DateTimeConditions') {
                  _self.params[_self.ruleItem.fields] = moment.tz(moment(_self.time).format('YYYY-MM-DD HH:mm:ss'), this.$store.state.user.timezoneId).utc().format()
                } else {
                  _self.params[_self.ruleItem.fields] = moment(_self.time).format('YYYY-MM-DD')
                }
              } else {
                _self.params[_self.ruleItem.fields] = ''
              }
            }
            _self.type = res.type
          }
          // let keyList = _self.ruleItem.urlParams
          // let params = {}
          // let flag = true
          // for (let index = 0; index < keyList.length; index++) {
          //   const element = keyList[index]
          //   if (_self.params[element].length > 0) {
          //     params[element] = _self.params[element]
          //   } else {
          //     flag = false
          //     break
          //   }
          // }
          // if (flag) {
          //   _self.getSelectDataLists({
          //     ..._self.ruleItem,
          //     searchKey: params
          //   })
          // }
        })
      }
    }
    // selectchange (val) {
    //   Cascader.$emit(`cascader${this.currIndex}${this.params.onlyId}`, this.currLabelIndex)
    //   if (this.ruleItem.emitCascaderId) Cascader.$emit(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.emitCascaderId}`, val)
    // }
  },
  destroyed () {
    Cascader.$off(`cascader${this.currIndex}${this.params.onlyId}${this.ruleItem.receiveCascaderId}`)
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
::v-deep .el-loading-spinner {
  top: 66%;
  left: 20px;
  text-align: left;
}
</style>
